<template>
  <div id="lotteryActivity">
    <h1 class="con-right-title">查看数据</h1>
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="活动名称：">
        {{ form.activityName }}
      </el-form-item>
      <el-form-item label="活动起始时间：">
        {{ form.activityStartTime }} - {{ form.activityEndTime }}
      </el-form-item>
      <el-form-item label="入量渠道：">
        <!-- <el-row> 一级渠道：{{ channels.join('，') || '暂无渠道' }} </el-row>
        <el-row>二级渠道：{{ secondChannel.join('，') || '暂无渠道' }} </el-row> -->
        <el-row> 一级渠道：{{ inviteMatchingChannel.oneLevelChannelName || '暂无渠道' }} </el-row>
        <el-row>二级渠道：{{ inviteMatchingChannel.twoLevelChannelName || '暂无渠道' }} </el-row>
      </el-form-item>
      <el-form-item label="数据详情：">
        <el-row :span="15" :gutter="10">
          <el-col :span="3">
            <el-card
              shadow="always"
              body-style="height:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around"
            >
              <div class="card-color">参与活动人数</div>
              <div>{{ activesCount.joinPersonsCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card
              shadow="always"
              body-style="height:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around"
            >
              <div class="card-color">活动上传作品数</div>
              <div>{{ activesCount.workContentCount }}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :span="15" :gutter="10" style="margin-top:30px">
          <el-col :span="3">
            <el-card
              shadow="always"
              body-style="height:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around"
            >
              <div class="card-color">活动集赞数</div>
              <div>{{ activesCount.gatherPraiseCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card
              shadow="always"
              body-style="height:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around"
            >
              <div class="card-color">活动入量数</div>
              <div>{{ activesCount.flowCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card
              shadow="always"
              body-style="height:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around"
            >
              <div class="card-color">活动成单数</div>
              <div>{{ activesCount.orderCount }}</div>
            </el-card>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getCollectLikesdata } from '@/api/operate/collectPraise.js'

export default {
  msg: '查看数据',
  components: {},
  data() {
    return {
      form: {},
      // channels: [],
      inviteMatchingChannel: {},
      // secondChannel: [],
      activesCount: {}
    }
  },
  async mounted() {
    this.form = { ...this.$route.query.value }
    this.inviteMatchingChannel = { ...this.form.inviteMatchingChannel }
    // if (this.$route.query.channels) {
    //   this.channels = this.$route.query.channels.map((item) => {
    //     return item.name
    //   })
    //   let a = this.$route.query.channels.findIndex((nels) => {
    //     return nels.secondChannel.length > 0
    //   })
    //   if (a !== -1) {
    //     this.$route.query.channels.forEach((channel) => {
    //       channel.secondChannel.forEach((one) => {
    //         this.secondChannel.push(one.name)
    //       })
    //     })
    //   }
    // }
    await getCollectLikesdata(
      this.$route.query.activityId,
      (res) => {
        this.activesCount = res
      },
      (er) => {}
    )
  }
}
</script>
<style lang="less" scoped>
:deep(.el-card) {
  border-radius: 10px;
}
.card-color {
  color: #333333;
  font-size: 15px;
  font-weight: bold;
}
</style>
